<template>
    <div class="index">
        <div class="nav">
            <ul class="nav-list">
                <!-- 图标 -->
                <li class="logo"></li>
                <!-- 菜单 -->
                <li v-for="item in navList" :key="item.name">
                    <div v-if="!item.children">
                        {{ item.name }}
                    </div>
                    <div v-else>
                        <span>{{ item.name }}</span>
                        <ul>
                            <li v-for="child in item.children" :key="child.name">
                                {{ child.name }}
                            </li>
                        </ul>

                    </div>
                </li>
            </ul>
        </div>
        <RouterView />

    </div>
</template>

<script setup>
import { RouterLink, RouterView } from 'vue-router'

let navList = [
    {
        name: '首页',
        children: [
            {
                name: '首页',
                path: '/'
            },
            {
                name: '关于我们',
                path: '/about'
            },
            {
                name: '产品中心',
                path: '/product'
            },
            {
                name: '新闻中心',
                path: '/news'
            },
            {
                name: '联系我们',
                path: '/contact'
            }
        ]
    },
    {
        name: '服务',
        path: '/service'
    },
    {
        name: '案例',
        path: '/case'
    },
    {
        name: '团队',
        path: '/team'
    },
    {
        name: '合作',
        path: '/cooperate'
    },
    {
        name: '关于月夕',
        path: '/about-yuexi'
    }
]
</script>

<style lang="scss" scoped>
.index {
    height: 100%;
}

.nav {
    width: 100%;
    height: 60px;

    .nav-list {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: 100%;

        li {
            position: relative;
        }

        ul {
            position: absolute;
            top: 60px;
            left: 0;
            width: 200px;
        }
    }
}
</style>